<template>
  <div class="mobile-home">
    <div class="header">
      <img src="../../assets/imgs/logobb.png" alt="" class="logo" />
      <div class="rightHeader">
        <van-icon name="search" />
        <van-icon name="contact" />
        <svg
          t="1586499476146"
          class="icon"
          viewBox="0 0 1536 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="13329"
          width="25"
          height="25"
          @click="
            isSelect = !isSelect
            isclick = !isclick
          "
        >
          <path
            d="M1216 128H64a64 64 0 0 1 0-128h1152a64 64 0 0 1 0 128z"
            p-id="13330"
            :fill="isclick ? '#1296db' : '#929290'"
          ></path>
          <path
            d="M704 576H64a64 64 0 0 1 0-128h640a64 64 0 0 1 0 128z"
            p-id="13331"
            :fill="isclick ? '#1296db' : '#929290'"
          ></path>
          <path
            d="M1472 1024H64a64 64 0 0 1 0-128h1408a64 64 0 0 1 0 128z"
            p-id="13332"
            :fill="isclick ? '#1296db' : '#929290'"
          ></path>
        </svg>
      </div>
    </div>
    <div class="faceplate " :class="{ seled: isSelect }">
      <ul>
        <li class=""><p>首页</p></li>
        <li class=""><p>博物馆简介</p></li>
        <li class=""><p>词条</p></li>
        <li class=""><p>新闻动态</p></li>
        <li class=""><p>导览</p></li>
        <li class=""><p>用户</p></li>
      </ul>
    </div>
    <div class="content" style="padding-top:1.4rem">
      <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img
              src="../../assets/imgs/1560158699041074175.jpg"
              alt=""
              style="width:100%"
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="../../assets/imgs/1560158699041074175.jpg"
              alt=""
              style="width:100%"
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="../../assets/imgs/1560158699041074175.jpg"
              alt=""
              style="width:100%"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="c-details">
        <div class="notice">
          <div class="n-border">
            <div class="n-detail">
              <p>公告</p>
              <p class="n-text">
                快乐就好看见环境环境客户框架和框架更健康高科技还款计划框架和框架好看炬华科技还款计划框架和框架好看
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: '',
      isSelect: true,
      isclick: false
    }
  },
  methods: {
    downChange(val) {
      console.log(val)
    }
  }
}
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.mobile-home {
  .my-swipe {
    width: 100%;
    // height: 4rem;
  }
  .my-swipe .van-swipe-item {
    // color: #fff;
    // font-size: 20px;
    // line-height: 150px;
    // text-align: center;
    // background-color: #39a9ed;
  }
  .van-icon {
    margin-right: 0.3rem;
    font-size: 0.65rem;
    &:hover {
      color: #1296db;
    }
  }
  .logo {
    height: 0.8rem;
    width: 4.56rem;
    position: absolute;
    left: 0.5rem;
  }
  .header {
    .rightHeader {
      display: flex;
      align-items: center;
    }
    height: 1.5rem;
    width: 101%;
    // background: #f6f3e6;
    background: #fff;
    display: flex;
    justify-content: flex-end;
    padding: 0 0.5rem;
    box-sizing: border-box;
    color: rgb(146, 146, 144);
    align-items: center;
    position: fixed;
    z-index: 3;
  }
  .seled {
    transform: translate(0, -100%) !important;
  }
  .faceplate {
    background: #000 url('../../assets/imgs/m-back.png') no-repeat;
    width: 100%;
    height: 100%;
    position: fixed;
    font-size: 0.5rem;
    text-align: center;
    color: rgb(242, 248, 255);
    background-size: 100% 100%;
    margin-top: 1.4rem;
    transform: translate(0, 0%);
    transition: 0.3s;
    z-index: 2;
    ul {
      li {
        line-height: 1rem;
      }
      margin-top: 1.3rem;
    }
  }
  .content {
    .c-details {
      width: 100%;
      height: 15rem;
      background: url('../../assets/imgs/m-bigback.jpg') no-repeat;
      background-size: cover;
      margin-top: -0.3rem;
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      padding-top: 0.7rem;
      .notice {
        width: 80%;
        height: 6rem;
        border: 0.08rem solid #fff;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        .n-border {
          width: 94%;
          height: 94%;
          background: #fff;
          text-align: center;
          .n-detail {
            display: flex;
            flex-direction: column;
            align-items: center;
            .n-text {
              width: 80%;
              font-size: 0.4rem;
              color: #838280;
              line-height: 0.54rem;
              margin-top: 0;
            }
          }
        }
      }
    }
  }
}
</style>
